<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="Utf-8">
</head>
<body>
<video id="video1" controls="controls" width="400px" height="400px">
    <source src="img/1.mp4">
</video>

<div>
    <button onclick="enableMute()" type="button">关闭声音</button>
    <button onclick="disableMute()" type="button">打开声音</button>
    <button onclick="playVid()" type="button">播放视频</button>
    <button onclick="pauseVid()" type="button">暂停视频</button>
    <button onclick="showFull()" type="button">全屏</button><br />
    <span>进度条:</span>
    <progress value="0" max="0" id="pro"></progress>
    <span>音量:</span>
    <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</div>

<script>
    var btn=document.getElementsByTagName("button");
    var myvideo=document.getElementById("video1");
    var pro=document.getElementById("pro");
    var ran=document.getElementById("ran");

    //关闭声音
    function enableMute(){
        myvideo.muted=true;
        btn[0].disabled=true;
        btn[1].disabled=false;
    }

    //打开声音
    function disableMute(){
        myvideo.muted=false;
        btn[0].disabled=false;
        btn[1].disabled=true;
    }

    //播放视频
    function playVid(){
        myvideo.play();
        setInterval(pro1,1000);
    }
    //暂停视频
    function pauseVid(){
        myvideo.pause();
    }
    //全屏
    function showFull(){
        myvideo.webkitrequestFullscreen();
    }
    //进度条展示
    function pro1(){
        pro.max=myvideo.duration;
        pro.value=myvideo.currentTime;
    }


    //拖动range进行调音量大小
    function setvalue(){
        myvideo.volume=ran.value/100;
        myvideo.muted=false;
    }



</script>

</body>
</html>
